<script lang='ts'>
import { Close } from "@element-plus/icons";
import { computed, defineComponent, onUpdated, ref } from "vue";

import { useStore } from "vuex";

export default defineComponent({
  name: "QueryResult",
  components: { Close },
  setup(props, { expose }) {
    //vuex仓库
    const store = useStore();
    //app element
    let app: any = document.getElementById("app");
    //当前组件宽度
    const currentWidth = computed(() => {
      return (
        parseInt(window.getComputedStyle(app).width) -
        (store.getters["menu/currentMenuWidth"] +
          store.getters["leftpop/currentWidth"])
      );
    });

    //debug
    onUpdated(() => {
      console.log(currentWidth);
    });

    //开关状态
    const drawer = ref(false);
    //开函数
    const open = () => {
      drawer.value = true;
    };
    //关函数
    const close = () => {
      drawer.value = false;
    };
    //ref暴露
    expose({
      open,
      close,           
    });

    //抛出
    return {
      drawer,
      close,
      currentWidth,
    };
  },
});
</script>

<template>
  <div
    class="queryresult-comp-wrap"
    v-show="drawer"
    :style="{ width: currentWidth + 'px' }"
  >
    <div class="close-btn" @click="close">
      <el-icon :size="20" color="#aaa"><Close /></el-icon>
    </div>
    <slot name="content"></slot>
  </div>
</template>

<style lang='less' scoped>
.queryresult-comp-wrap {
  position: absolute;
  right: 0px;
  bottom: 0px;
  min-width: 400px;
  min-height: 200px;
  padding: 10px;
  background: white;
  box-sizing: border-box;
  border-left: 3px solid #f00000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .close-btn {
    position: absolute;
    right: 0px;
    top: 0px;
  }
}
</style>